<template>
  <div class="container">
    <h1>首页管理</h1>
    <el-row :gutter="20" type="flex">
      <el-col class="col_flex">
        <el-card class="myCard">
          <h2>客户数量</h2>
          <p class="myData">{{ clientNum }}</p>
        </el-card>
        <el-card class="myCard">
          <h2>公司资产</h2>
          <p class="myData">{{ -9889772+'￥' }}</p>
        </el-card>
        <el-card class="myCard">
          <h2>员工数量</h2>
          <p class="myData">{{ employeesNum }}</p>
        </el-card>
        <el-card class="myCard">
          <h2>摸鱼人数</h2>
          <p class="myData">{{ 20 }}</p>
        </el-card>
      </el-col>
      <el-col class="col_pillar"><pillar /></el-col>
    </el-row>

  </div>
</template>

<script>
import { KundeCount } from '@/api/myclient'
import { getEmployeesNum } from '@/api/employees'
import pillar from './component/pillar.vue'
export default {
  components: {
    pillar
  },
  data() {
    return {
      clientNum: '',
      employeesNum: ''
    }
  },
  async created() {
    this.clientNum = await KundeCount()
    this.employeesNum = await getEmployeesNum()
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
}
.myCard{
  width: 150px;
  height: 150px;
}
.col_flex{
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 450px;
}
.myData{
  font-size: 20px;
  font-weight: 700;
}
@media(max-width: 1260px){
.col_flex{
  width: 150px;
}
@media(max-width:635px){
.col_flex{
  width: 600px;
}
}
}

</style>
